<template lang="html">
    <div class="index_body">
        <div class="head" :style="head">
            <div>
                <div class="user_box">
                    <img v-if="userinfo.headimgurl" :src="userinfo.headimgurl" alt="">
                    <img v-else :src="userimg" alt="">
                </div>
                <p v-if="userinfo.nickname" class="user_name">{{userinfo.nickname}}(id:{{userinfo.user_id}})</p>
                <p v-else class="user_name">小壹-01</p>
            </div>
        </div>
        <div class="nav">
            <div class="item">
                <p class="number_p">{{amount}} <span>元</span> </p>
                <p>余额</p>
            </div>
            <div class="item">
                <p class="number_p">{{commission}} <span>元</span> </p>
                <p>预计到账</p>
            </div>
            <div class="item">
                <p class="number_p">{{coupon_num}} <span>张</span> </p>
                <p>优惠券</p>
            </div>
        </div>
        <div class="hr_box">
        </div>
        <div class="wp_box">
                <router-link tag='div' :to="{ name: 'StreamLog' }" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[0]">

                        </div>
                        <p>消费账单</p>
                    </div>
                </router-link>
                <router-link tag='div' :to="{ name: 'CouponList' }" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[1]">

                        </div>
                        <p>我的优惠</p>
                    </div>
                </router-link>
                <div class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[2]">

                        </div>
                        <p>指导手册</p>
                    </div>
                </div>
                <router-link tag="div" :to="{ name: 'BinPeople' }" v-if="!is_people" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[3]">

                        </div>
                        <p>开通推广功能</p>
                    </div>
                </router-link>
                <router-link tag="div" :to="{ name: 'FanQrcode' }" v-if="is_people" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[3]">

                        </div>
                        <p>我要推广</p>
                    </div>
                </router-link>
                <router-link tag="div" :to="{ name: 'FriendsList' }" v-if="is_people" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[4]">

                        </div>
                        <p>我推荐的朋友</p>
                    </div>
                </router-link>
                <router-link tag="div" :to="{ name: 'IntegralList' }" v-if="is_people" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[6]">

                        </div>
                        <p>提成记录</p>
                    </div>
                </router-link>
                <router-link tag="div" :to="{ name: 'IntegralListFuture' }" v-if="is_people" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[7]">

                        </div>
                        <p>未到账提成</p>
                    </div>
                </router-link>

                <router-link tag="div" :to="{ name: 'TiXian' }" v-if="is_people" class="group_item">
                        <div class="item">
                            <div class="icon" :style="icon[8]">

                            </div>
                            <p>余额提现</p>
                        </div>
                </router-link>
                    <router-link tag="div" :to="{ name: 'WithdrawList' }" v-if="is_people" class="group_item">
                        <div class="item">
                            <div class="icon" :style="icon[9]">

                            </div>
                            <p>提现记录</p>
                        </div>
                    </router-link>
                <router-link tag="div" :to="{ name: 'Follow' }" class="group_item">
                    <div class="item">
                        <div class="icon" :style="icon[10]">

                        </div>
                        <p>我的关注</p>
                    </div>
                </router-link>
        </div>
        <tabbar v-show="$route.meta.navShow" :idx="3"></tabbar>
    </div>
</template>

<script>
import userimg from '@/assets/lingyi_logo@2x.png'
import tabbar from '@/components/Tabbar'
export default {
    data(){
        return{
            head:{
                backgroundImage: "url(" + require("../../assets/page3_bg@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            amount:0,
            commission:0,
            coupon_num:0,
            userimg,
            userinfo:[],
            peopleinfo:[],
            is_people:false,
            icon:[
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_01@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_02@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_03@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },{
                    backgroundImage: "url(" + require("../../assets/page1_icon_04@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_05@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_06@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_07@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_08@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_09@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_10@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                {
                    backgroundImage: "url(" + require("../../assets/page1_icon_11@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                }
            ]
        }
    },
    metaInfo: {
      title: "个人中心"
    },
    mounted(){
        // let that = this;
        // let url = "/fang/personal/user_info";
        // that.$axios.post(url,that.$qs.stringify({
        //     access_token:that.$store.state._token01
        // }))
        // .then(function(response){
        //     console.log(response);
        //     let res = response.data;
        //     if(res.status == 1){
        //         that.amount = res.data.amount;
        //         that.commission = res.data.commission;
        //         that.coupon_num = res.data.coupon_num;
        //         that.userinfo = res.data.item;
        //         that.peopleinfo = res.data.people_info;
        //         if(res.data.people_info.id != '' && res.data.people_info.id != null && res.data.people_info.id != 'undefined'){
        //             that.is_people=true;
        //         }else{
        //             that.is_people=false;
        //         }
        //     }else if (res.status == -1) {
        //         that.noLogin();
        //     }
        // })
        // .catch(function(error){
        //     console.log(error);
        // });
    },
    components:{
        tabbar
    },
    beforeCreate:function(){
        document.getElementsByTagName("body")[0].className="index_active_bg";
    },
    activated:function(){
        //使用keep-alive以后进入页面只会触发activated
        document.getElementsByTagName("body")[0].className="index_active_bg";
        let that = this;
        let url = "/fang/personal/user_info";
        that.$axios.post(url,that.$qs.stringify({
            access_token:that.$store.state._token01
        }))
        .then(function(response){
            console.log(response);
            let res = response.data;
            if(res.status == 1){
                that.amount = res.data.amount;
                that.commission = res.data.commission;
                that.coupon_num = res.data.coupon_num;
                that.userinfo = res.data.item;
                that.peopleinfo = res.data.people_info;
                if(res.data.people_info.id != '' && res.data.people_info.id != null && res.data.people_info.id != 'undefined'){
                    that.is_people=true;
                }else{
                    that.is_people=false;
                }
            }else if (res.status == -1) {
                that.noLogin();
            }
        })
        .catch(function(error){
            console.log(error);
        });
    },
    beforeDestroy: function() {
        document.body.removeAttribute("class","index_active_bg");
    },
    deactivated:function(){
        //deactivated使用keep-alive以后推出页面只会触发deactivated
        document.body.removeAttribute("class","index_active_bg");
    }
}
</script>

<style lang="css" scoped>
.index_body{
    height: 100%;
}
.fl{
    display: flex;
}
.head{
    height: 7.96rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head .user_box{
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border:.08rem solid #ffffff;
    box-shadow: 0 0.16rem 0.24rem #1ca48a;
}
.head .user_box img{
    width: 100%;
    height: auto;
}
.head .user_name{
    font-size: .6rem;
    color: #ffffff;
    font-weight: 500;
    margin-top: .22rem;
}
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.42rem;
}
.nav .item{
    flex: 1;
}
.nav .item .number_p{
    font-size: .84rem;
    color: #212121;
    margin-bottom: .14rem;
}
.nav .item .number_p > span{
    font-size: .48rem;
    margin-left: -.15rem;
}
.nav .item > p{
    font-size: .48rem;
    color: #8B8B8B;
}
.hr_box{
    height: .36rem;
    background:rgba(243,244,245,1);
    overflow: hidden;
}
.wp_box{
    padding:0 .64rem;
    overflow: hidden;
}
.wp_box .border-bottom-1px::after{
    border-color: #F2F2F2;
}

.wp_box .group_item{
    width: 4.55rem;
    height: 4.08rem;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    position: relative;
}
.wp_box .group_item::before{
    position: absolute;
      bottom:0;
      left:0;
      content: '';
      width:100%;
      height:1px;
      border-top:1px solid #F2F2F2;
      transform: scaleY(0.5);
}
.wp_box .group_item::after{
    position: absolute;
    right: 0;
    top: -50%;
    content: "";
    display: block;
    width: 1px;
    height: 200%;
    border-right: 1px solid #F2F2F2;
    -webkit-transform: scaleY(.5);
      transform: scaleY(0.5);
}
.wp_box .group_item:nth-child(3n+3)::after{
    border:none;
}
.wp_box .group_item .icon{
    width: 1.6rem;
    height: 1.64rem;
    margin: 0 auto;
}
.wp_box .group_item p{
    font-size: .48rem;
    color: #212121;
}
</style>
